<template>
    <div class="card">
        <!-- 图片 -->
        <i :class="icon"></i>
        <!-- 数字和子标题 -->
        <div>
           <div class="number">{{number}}</div>
           <div class="subTitlte">{{subTitlte}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"Card",
        props:{
            /**
             * 图标
             */
            icon:String,
            /**
             * 数字
             */
            number:Number,
            /**
             * 子标题
             */
            subTitlte:String,
        }
    }
</script>

<style lang="scss" scoped>
.card{
    padding: 20px;
    background: white;
    border-radius: 3px;
    display: flex;
    align-items: center;
    transition: 0.2s linear;
    &:hover{
        box-shadow: 0 0 15px #ccc;
    }
    i{
        width:40px;
        height: 40px;
        display: inline-block;
        text-align: center;
        line-height: 40px;
    }
    .number{
        font-size: 24px;
        font-weight: 500;
    }
    .subTitlte{
        font-size: 13px;
        font-weight: 400;
        color: #6c757d !important;
    }
}
</style>